<template>
  <div class="app">
    <div class="box">
      <div class="boxone">
        <el-input v-model="input" placeholder="请输入查询id" clearable />
          <el-button type="primary" @click="chaxun() ">查询</el-button>
        <el-button>重置</el-button>
      </div>
    </div>
    <div class="boxtwo">
      <el-button type="primary" @click="fun">发布通知</el-button>
      <el-table :data="tableData" border style="width: 100%" stripe="ture">
        <el-table-column prop="id" align="center" label="序号" width="70" />
        
        <el-table-column prop="title" align="center" label="标题" width="187"/>
     
       <el-table-column prop="priority" align="center" label="发送范围" width="184" />
        <el-table-column
          prop="typeId"
          width="200"
          align="center"
          label="发送对象"
        />
        <el-table-column
          prop="typeId"
          width="190"
          align="center"
          label="发布者"
        />
        <el-table-column
          prop="time"
          width="184"
          align="center"
          label="发布时间"
        />
        <el-table-column prop="id" width="184" align="center" label="操作">
          
            <template #default="scope">
            <span @click="deletes(scope.row)" style="color: red"> 删除 </span>
          </template>
          
        </el-table-column>
      </el-table>
      
      <div class="boxstree">
        <el-pagination
          small
          background
          layout="prev, pager, next"
          :total="50"
          class="mt-4"
        />
      </div>
    </div>
  </div>
</template>

<script setup>
import { ElNotification } from 'element-plus'
import server from "@/api/index.ts";
import { number } from "echarts";
import { onMounted, reactive, ref } from "vue";
import { useRouter } from "vue-router";
// var  input = ref("");
var tableData = ref([]);

var rem = ref();
onMounted(async () => {
  var res = await server.juxiaohutong.link({ cp: 1, ps: 8 });
  console.log(res.data.data.date);
  tableData.value = res.data.data.date;
});

var remove = () => {
  console.log(rem.value);
};
const deletes = async (row) => {
  console.log(row.id);
  var res = await server.juxiaohutong.deleteAllInform(row.id);
  if (res.data.code == 200) {
     ElNotification.success({ message: '删除成功' })
    var i = tableData.value.findIndex((item) => item.id == row.id);
    tableData.value.splice(i, 1);
  }
};
//获取路由管理实例
var router = useRouter();

var fun = () => {
  router.push("/index/juxiaotongzhi/juxiaoone");
};
// 输入框
const input = ref();
//查询
var chaxun=async()=>{
var num=input.value
console.log(num);
    var res=await server.juxiaohutong. getAllInformById(num) 
  console.log(res);
 if (res.data.code == 200) {
     ElNotification.success({ message: '查看成功' })
  }
 
}

</script>

<style scoped>
.app {
  /* background-color: #e2e2e2; */
  width: 100%;
}

.box {
  margin-top: 5px;
  width: 100%;
  height: 60px;
  /* background-color: #fff; */
}
.boxone {
  display: flex;
  width: 45%;

  margin-left: 50%;
}
.boxtwo {
  margin-top: 10px;
  width: 1200px;
  background-color: #fff;
  margin: 0 auto;
  text-align: center;
}
.boxtwo > .el-button {
  margin: 10px 0;
  margin-left: 92%;
}
.boxstree {
  margin-left: 80%;
  margin-top: 30px;
}
</style>